<!DOCTYPE html>
<html>

{% include head.html %}
<style>
    header, main, footer {
        padding-left: 300px;
    }

    @media only screen and (max-width: 992px) {
        header, main, footer {
            padding-left: 0;
        }
    }

    nav.top-nav {
        height: 122px;
        box-shadow: none;
    }

    nav.top-nav div.page-title {
        line-height: 122px !important;
        font-size: 28px;
        white-space: nowrap;
        overflow: hidden;
    }
    nav a.button-collapse {
        line-height: 122px !important;
    }

    a.button-collapse i {
        height: 122px;
        line-height: 122px !important;
    }
    .toc-wrapper {
        position: relative;
        margin-top: 70px;
    }
    #search {
        border-bottom: 0px !important;
        margin-bottom: 0px;
    }
    .input-field {
        margin-top: 0rem;
    }
</style>
<body>
<header class="site-header">
    <nav class="top-nav blue darken-1">
        <div class="container">
            <a href="#" data-activates="slide-out" class="button-collapse"><i class="material-icons">menu</i></a>
            <div class="page-title" style="text-overflow: ellipsis">
                {{ page.title }}
            </div>
        </div>
    </nav>
    <ul id="slide-out" class="side-nav fixed">
        <li>
            <div class="userView">
                <a href="{{ site.baseurl }}/"><img class="circle" src="http://himg.bdimg.com/sys/portrait/item/54429d2f.jpg"></a>
                <a href="#!"><span class="black-text name">{{ site.title }}</span></a>
                <a href="mailto:{{ site.email }}"><span class="black-text email">{{ site.email }}</span></a>
            </div>
        </li>
        <form>
            <div class="input-field">
                <input id="search" type="search" required >
                <label class="label-icon" for="search"><i class="material-icons">search</i></label>
                <i class="material-icons">close</i>
            </div>
        </form>
        <li>
            <div class="divider"></div>
        </li>
        <li><a class="subheader">页面</a></li>
        {% for my_page in site.pages %}
        {% if my_page.title %}
        <li><a class="waves-effect" data-position="right" data-delay="50" data-tooltip="{{ my_page.title }}" href="{{ my_page.url | prepend: site.baseurl }}">{{ my_page.title }}</a></li>
        {% endif %}
        {% endfor %}
        <li>
            <div class="divider"></div>
        </li>
        <li><a class="subheader">文章</a></li>
        {% for post in site.posts %}
        <li><a class="waves-effect" data-position="right" data-delay="50" data-tooltip="{{ post.title }}" href="{{ post.url | prepend: site.baseurl }}">{{ post.title }}</a></li>
        {% endfor %}
    </ul>
</header>
<main>
    <div class="container">
        <div class="wrapper">
            <div class="row">
                <div class="col s12 m9 l10">
                    {{ content }}
                </div>
                <div class="col hide-on-small-only m3 l2">
                    <div class="toc-wrapper pin-top" style="top: 0px;">
                        <div id="toc"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>
{% include footer.html %}
<script>
    $(".button-collapse").sideNav();
    $(document).ready(function(){
        $('.waves-effect').tooltip({delay: 50});
    });
    $(document).ready(function() {
        $('#toc').toc();
    });
    $(document).ready(function(){
        $('.clickable-header').scrollSpy();
    });
    $(document).ready(function(){
        $('.toc-wrapper').pushpin({
            top: 122,
            bottom: 999999,
            offset: 0
        });
    });
</script>
</body>

</html>
